<template>
    <div>
        <el-collapse-item title="- 位置及显示信息" :name="props.id">
            <ul class="editorformTable">
                <!-- 普通文字和图标点 -->
                <div v-if="pageIsShowItem.coordinate" :key="coordinateKey">
                    <li class="editorformItem">
                        <div class="editorformItemName">经度</div>
                        <div class="editorformItemFunc">{{ layer.point.lng }}</div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">纬度</div>
                        <div class="editorformItemFunc">{{ layer.point.lat }}</div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">海拔高度</div>
                        <div class="editorformItemFunc">{{ layer.point.alt }} 米</div>
                    </li>
                </div>
                <div v-if="pageIsShowItem.zoom">
                    <li class="editorformItem">
                        <div class="editorformItemName">是否按视距缩放</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="style.scaleByDistance" @change="change('scaleByDistance', style.scaleByDistance)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.scaleByDistance">
                        <div class="editorformItemName">上限</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.scaleByDistance_far" @input="change('scaleByDistance_far', style.scaleByDistance_far)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.scaleByDistance">
                        <div class="editorformItemName">比例值</div>
                        <div class="editorformItemFunc">
                            <el-input-number
                                v-model="style.scaleByDistance_farValue"
                                class="editorforminput"
                                :precision="1"
                                :step="0.1"
                                conliols-position="right"
                                :min="0.1"
                                @input="change('scaleByDistance_farValue', style.scaleByDistance_farValue)"
                            />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.scaleByDistance">
                        <div class="editorformItemName">下限</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.scaleByDistance_near" @input="change('scaleByDistance_near', style.scaleByDistance_near)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.scaleByDistance">
                        <div class="editorformItemName">比例值</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.scaleByDistance_nearValue" @input="change('scaleByDistance_nearValue', style.scaleByDistance_nearValue)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
                        </div>
                    </li>
                </div>
                <div v-if="pageIsShowItem.rangeofvisibility">
                    <li class="editorformItem">
                        <div class="editorformItemName">是否按视距显示</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="style.distanceDisplayCondition" @change="change('distanceDisplayCondition', style.distanceDisplayCondition)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.distanceDisplayCondition">
                        <div class="editorformItemName">最大距离</div>
                        <div class="editorformItemFunc">
                            <el-input-number
                                v-model="style.distanceDisplayCondition_far"
                                @input="change('distanceDisplayCondition_far', style.distanceDisplayCondition_far)"
                                class="editorforminput"
                                :step="1"
                                conliols-position="right"
                                :min="1"
                            />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.distanceDisplayCondition">
                        <div class="editorformItemName">最小距离</div>
                        <div class="editorformItemFunc">
                            <el-input-number
                                v-model="style.distanceDisplayCondition_near"
                                @input="change('distanceDisplayCondition_near', style.distanceDisplayCondition_near)"
                                class="editorforminput"
                                :step="1"
                                conliols-position="right"
                                :min="0"
                            />
                        </div>
                    </li>
                </div>
                <li class="editorformItem" v-if="pageIsShowItem.clampToGround">
                    <div class="editorformItemName">是否贴地</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.clampToGround" @change="change('clampToGround', style.clampToGround)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="pageIsShowItem.visibleDepth">
                    <div class="editorformItemName">是否被遮挡</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.visibleDepth" @change="change('visibleDepth', style.visibleDepth)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed, ref } from "vue";
import global from "@/utils/global.data.params";
import mars from "@/config/mars3d";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
let layer: any = ref({});
layer = computed(() => {
    return props.graphic;
});
const style: any = reactive(layer.value.style);
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            // case "scaleByDistance":
            //     props.graphic.setStyle({ scaleByDistance: val });
            //     break;
            case "scaleByDistance":
                props.graphic.setStyle({ scaleByDistance: val });
                break;
            case "scaleByDistance_farValue":
                props.graphic.setStyle({ scaleByDistance_farValue: val });
                break;
            case "scaleByDistance_near":
                props.graphic.setStyle({ scaleByDistance_near: val });
                break;
            case "scaleByDistance_nearValue":
                props.graphic.setStyle({ scaleByDistance_nearValue: val });
                break;
            case "distanceDisplayCondition":
                props.graphic.setStyle({ distanceDisplayCondition: val });
                break;
            case "distanceDisplayCondition_far":
                props.graphic.setStyle({ distanceDisplayCondition_far: val });
                break;
            case "distanceDisplayCondition_near":
                props.graphic.setStyle({ distanceDisplayCondition_near: val });
                break;
            case "clampToGround":
                props.graphic.setStyle({ clampToGround: val });
                break;
            case "visibleDepth":
                props.graphic.setStyle({ visibleDepth: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
const plottingType: any = ref(layer.value.options.plottingType);
const pageIsShowItem = reactive({
    coordinate: false, // 坐标
    zoom: false, // 视距缩放
    rangeofvisibility: true, // 视距显示
    clampToGround: true, // 贴地
    visibleDepth: false, // 遮挡
});
const setPageIsShowItem = () => {
    let type = plottingType.value;
    // <!-- 普通文字和图标点 -->
    if (type == "ordinaryText" || type == "iconPoint") {
        pageIsShowItem.coordinate = true;
        pageIsShowItem.zoom = true;
    } else {
        pageIsShowItem.visibleDepth = true;
    }
};
setPageIsShowItem();
// 监听修改点跟新动态显示数据
const coordinateKey = ref(new Date().getTime());
props.graphic.on(mars.mars3d.EventType.editMovePoint, (e: any) => {
    if (pageIsShowItem.coordinate) {
        // 更新坐标高度信息
        coordinateKey.value = new Date().getTime();
    }
});
</script>
